I'm working on an ecommerce marketplace, the code seems to be fine but the paypal button seems to render at first on load but then disappears after 4-5 sec. the console shows "unhandled error Error: zoid destroyed all components". I've tried changing browsers but the problem still persists. Below is my code:

  useEffect(() => {
    const addPaypalScript = async () => {
      const { data: clientId } = await axios.get(
        `/api/config/paypal/${orderId}`
      )
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}`
      script.async = true
      script.onload = () => {
        setSdkReady(true)
      }
      document.body.appendChild(script)
    }
    addPaypalScript()
    if (!order || successPay) {
      dispatch({ type: ORDER_PAY_RESET })
      dispatch(getOrderDetails(orderId))
    } else if (!order.isPaid) {
      if (!window.paypal) {
        addPaypalScript()
      } else {
        setSdkReady(true)
      }
    }
  }, [dispatch, orderId, successPay, order])

below is the paypal button frontend code

<ListGroup.Item>
                  <Row>
                    {loadingPay && <Loader />}
                    {!sdkReady ? (
                      <Loader />
                    ) : (
                      <PayPalButton
                        onButtonReady={() => setSdkReady(true)}
                        amount={order.totalPrice}
                        onSuccess={successPaymentHandler}
                      />
                    )}
                  </Row>
                </ListGroup.Item>